<html>
	<head>
	<title>Expandable List Behavior Demo</title>
<style type="text/css"> 

	body { 
	  font-family:"Century Gothic","Tahoma"; 
	  font-size:10pt; 
	  padding: 10px;
	  width:100%%; height:100%%;  
	  background-color: #e9e8f3;
	}
  
  @const ANIMATION_STEP_MS: 8;

	#thebar 
	{
    style-set: "h-animate-when-current"; // see below
	  width:100%%;	  
	  height:max-intrinsic;
    min-height:48px;
	  margin:0;
    padding:0;    
	  border:1px solid #bdbccc;
	  background-color: #fff;
	  behavior:expandable-list;
	  flow:horizontal;
	  overflow-y:hidden;
	  overflow-x:hidden;
	}
	
	#thebar > li 
	{
	   flow:horizontal;
     display:block;
	   width:min-intrinsic; /* natural width */
     background-color: #F4F3F9;
     height:100%%;
	} 

  #thebar > li > .caption
	{
	  width:48px;
	  height:100%%;
	  text-align:center;
	  vertical-align:middle;
	  background-image:url(images/outlook/tab.png);
	  background-repeat:expand stretch-left stretch-right stretch-middle;
	  background-position:3px 3px 3px 3px;
	} 

  #thebar > li:collapsed > .caption:hover
	{
	  transition:blend;
    background-image:url(images/outlook/tab-hover.png);
	} 
  
  #thebar > li:collapsed > .caption:active
	{
    background-image:url(theme:button-pressed);
	} 
  
  #thebar > li:expanded > .caption
	{
	  background-image:none; 
	} 
	
	#thebar > li > .content 
	{
    vertical-align: middle;
    white-space: nowrap;
	  height:100%%; 
	}
	#thebar > li:expanded > .content 
	{
    overflow:hidden;
	  width:100%%; 
	}
  
	@set h-animate-when-current
  {	
		:root > li
		{
			width:min-intrinsic;
		}
		
		:root > li:current
		{
			width:100%%; /* whole idea - it takes all available space */ 	  
		}
		
		:root > li > .content /* normally li > .content inside is collapsed */
		{
		  visibility:collapse;
		  overflow-x:hidden;
		}
   
    :root > li:animating > .content, 
		:root > li:expanded > .content 
		{
		  visibility:visible;
		  width:100%%; 
		}

		:root > li:collapsed
		{
		  assigned!: self.start-animation();
		  animation-start!: self::width = 100%% ;
		  animation-end!:   self::width = null, // reset values used in animation
		                    self.child(2)::visibility = null, 
							          self.child(2)::opacity = null; 
		  animation-step!:  
            self::width > 0%% ? 
            (
               delta = limit( self::width * 0.12, 1%%, 8%% ),
               self::width = self::width - delta, 
               self::width < 15%% ? self.child(2)::visibility = "collapse" #
               self::width < 50%% ? self.child(2)::opacity = float(self::width) / 50.0, 
               return @ANIMATION_STEP_MS
            );
		}

		:root > li:expanded
		{
		  assigned!: self.start-animation();
          animation-start!: self::width = 1%% ;
          animation-end!:   self::width = 100%% ;
          animation-step!:  
            self::width < 100%% ? 
            (
              delta = limit( (100%% - self::width) * 0.12, 1%%, 8%% ),
              self::width = self::width + delta, 
              return @ANIMATION_STEP_MS
            );
		}
   
	}

</style>
	</head>
	<body>
	  <h3>Horizontally sliding bar</h3>
		<ul id="thebar" name="sliding bar">
			<li default>
			    <div class="caption"><img src="images/4.gif"></div>
			    <div class="content">content of bar #1</div>
			</li>
			<li>
			    <div class="caption"><img src="images/2.gif"></div>
			    <div class="content" style="font:system">
            font: <select size=1>
              <option selected>Arial</option>
              <option>Tahoma</option>
              <option>Verdana</option>
              </select> <select size=1>
              <option selected>10pt</option>
              <option>12pt</option>
              <option>14pt</option>
              </select><br>
              alignment, left: <input type="radio" name="alignment"> center:<input type="radio" name="alignment"> right:<input type="radio" name="alignment">
          </div>
			</li>
			<li>
			    <div class="caption"><img src="images/7.gif"></div>
			    <div class="content">content of bar #3</div>
			</li>
		</ul>
	</body>
</html>
